<template>
  <div class="ShopXQ">
    <div class="homeTop">
      <div class="topCenter flex-md">
        <div class="centerTitle flex-sbc">
          <div class="left">
            <div style="margin-right: 15px" @click="homeClick()">
              <i class="el-icon-s-home" style="color: #FF0036"></i>
              首页
            </div>
            <div style="color: #FF0101;margin-right: 15px" v-if="username == ''">亲，请登录</div>
            <div style="color: #FF0101;margin-right: 15px" v-else>
              <el-dropdown @command="commandClick">
               <span class="el-dropdown-link">
                  {{ username }}<i class="el-icon-arrow-down el-icon--right"></i>
               </span>
                <el-dropdown-menu slot="dropdown">
                  <el-dropdown-item command="1">后台管理</el-dropdown-item>
                  <el-dropdown-item divided command="loginout">退出登录</el-dropdown-item>
                </el-dropdown-menu>
              </el-dropdown>
            </div>
            <div>喵，欢迎来到节鱼二手商城</div>
          </div>
          <div class="right">
            <div style="margin-right: 15px">
              <el-dropdown @command="commandClick">
               <span class="el-dropdown-link">
                  我的商品<i class="el-icon-arrow-down el-icon--right"></i>
               </span>
                <el-dropdown-menu slot="dropdown">
                  <el-dropdown-item command="2">已买的商品</el-dropdown-item>
                  <el-dropdown-item command="3">出售的商品</el-dropdown-item>
                </el-dropdown-menu>
              </el-dropdown>
            </div>
            <div style="margin-right: 15px">
              <i class="el-icon-shopping-cart-2" :style="collectNum>0 ? 'color: red':'color: red'"></i>
              购物车
            </div>
            <div style="margin-right: 15px">联系客服</div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: 'FHeader',
  props:{
    username: {
      type: String,
    },
    collectNum: {
      type: Number,
      default: 0
    }
  },
  data() {
    return{
    }
  },
  methods:{
    commandClick(cmditem) {
      if (!cmditem) {
        this.$message('菜单选项缺少command属性');
        return;
      }
      switch (cmditem) {
        case '1':
          this.$router.push('../admin/Admin');
          break;
        case '2':
          this.$router.push('../front/Yiship');
          break;
        case '3':
          this.$router.push('../front/ChuShip');
          break;
        case 'loginout':
          // localStorage.removeItem("ms_username");
          window.sessionStorage.clear();//清除session
          this.$router.push('/login');
          break;
      }
    },
    homeClick(){
      this.$router.push('../front/Home');
    }
  }
};
</script>

<style lang="less" scoped>
.ShopXQ{
  .homeTop {
    z-index: 10000;
    width: 100%;
    background: #F5F5F5;
    border-bottom: 1px solid #EEE;

    .topCenter {
      margin: 0 auto;
      width: 990px;
      height: 35px;
      background: #F5F5F5;
      -webkit-backface-visibility: hidden;

      .centerTitle {
        width: 75%;
        color:#999;
        font-size: 14px;

        .left {
          display: flex;
        }

        .right {
          display: flex;
        }
      }
    }
  }
}
</style>
